<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sloaner白板</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>
        <div class="logo">
            <img src="img/logo.svg" alt="Sloaner白板" id="logo">
            <h1>Sloaner白板</h1>
        </div>
        <div class="page-controls">
            <button id="prevPage" title="上一页">◀</button>
            <span id="pageInfo">第 1 页 / 共 1 页</span>
            <button id="nextPage" title="下一页">▶</button>
            <button id="newPage" title="新建页面">+</button>
        </div>
        <div class="controls">
            <input type="color" id="colorPicker" value="#000000">
            <input type="range" id="brushSize" min="1" max="50" value="5">
            <button id="clear">清空画板</button>
            <button id="save">保存</button>
        </div>
    </header>
    <div class="container">
        <div class="sidebar">
            <div class="tool-group">
                <button id="pencil" class="tool active" title="画笔">
                    <svg viewBox="0 0 24 24" width="24" height="24">
                        <path fill="currentColor" d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>
                    </svg>
                </button>
                <button id="eraser" class="tool" title="橡皮擦">
                    <svg viewBox="0 0 24 24" width="24" height="24">
                        <path fill="currentColor" d="M15.14 3c-.51 0-1.02.2-1.41.59L2.59 14.73c-.78.77-.78 2.04 0 2.83L5.03 20h7.66l8.72-8.72c.78-.78.78-2.05 0-2.83l-4.84-4.86C16.15 3.2 15.65 3 15.14 3M7.5 18c-1.5 0-2.7-1.2-2.7-2.7 0-1.5 1.2-2.7 2.7-2.7 1.5 0 2.7 1.2 2.7 2.7 0 1.5-1.2 2.7-2.7 2.7"/>
                    </svg>
                </button>
            </div>
            <div class="pages-list">
                <h3>页面列表</h3>
                <ul id="pagesList">
                    <li class="active" data-page="0">页面 1</li>
                </ul>
            </div>
        </div>
        <main>
            <canvas id="whiteboard"></canvas>
        </main>
    </div>
    <script src="js/script.js"></script>
</body>
</html> 